<template>
	<view class="container">
		<view class="title" :style="{ backgroundColor: bg }">
			{{ title }}
		</view>
		<view class="content">
			<view class="option" :style="{ backgroundColor: currentIndex === index ? bg : '' }" v-for="(option, index) in options"
				@click="currentIndex = index" :key="index">
				{{ option }}
			</view>

			<view class="current" :style="{ backgroundColor: bg }">
				{{ currentOption }}
			</view>
		</view>

		<button type="default" :style="{ backgroundColor: bg }" @click="confirm">确认</button>
	</view>
</template>

<script>
import {
	mapMutations
} from 'vuex';


export default {
	name: "Myoptions",
	props: {
		options: {
			type: Array,
			default: ["头晕", "昏阙", "胸闷", "胸痛", "后背桶", "呼吸困难", "恶心", "呕吐", "腹痛", "其他"]
		},
		title: {
			type: String,
			default: '不适症状'
		},
		bg: {
			type: String,
			default: 'rgb(106, 212, 192)'
		}
	},
	data() {
		return {
			currentOption: this.options[0],
			currentIndex: 0,
		};
	},
	methods: {
		...mapMutations('health', ['updateSymptom', 'updateBlood']),

		confirm() {
			const time = new Date()
			const option = {
				name: this.currentOption,
				time
			}

			if (this.title === "不适症状") {
				this.updateSymptom(option)
			}
			if (this.title === "选择出血部位") {
				this.updateBlood(option)
			}

			uni.navigateTo({
				url: "/pages/health/Body/Body"
			})
		}
	},
	watch: {
		currentIndex: {
			handler(newVal) {
				this.currentOption = this.options[newVal]
			},
		}
	}
}
</script>

<style lang="less" scoped>
.container {
	padding: 40rpx;
	background-color: rgb(241, 247, 247);
	height: 100vh;

	.title {
		font-size: 40rpx;
		font-weight: 700;
		line-height: 70rpx;
		color: white;
		padding-left: 40rpx;
	}

	.content {
		width: 100%;
		margin-bottom: 40rpx;
		border-radius: 8px;
		box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		align-items: center;
		background-color: white;

		.option {
			width: 230rpx;
			height: 70rpx;
			line-height: 70rpx;
			margin: 40rpx 20rpx;
			font-size: 37rpx;
			border: 2px solid #CCCCCC;
			text-align: center;
			border-radius: 15rpx;
		}

		.current {
			width: 414rpx;
			padding: 20rpx 0;
			text-align: center;
			font-size: 45rpx;
			color: white;
			font-weight: 700;
			width: 230rpx;
		}
	}
}

.active {
	background-color: rgb(106, 212, 192);
}
</style>
